import {createRouter, createWebHashHistory} from 'vue-router'

const Home = () => import('../views/Home.vue')
const About = () => import('../views/About.vue')
const UserCenter = () => import('../views/user-center/Index.vue')
const UserProfile = () => import('../views/user-center/Profile.vue')
const UserSettings = () => import('../views/user-center/Settings.vue')
const VuexPage = () => import("../views/Vuex.vue")

const ElementTest = () =>import("../views/ElementTest.vue")

const ListDemo= () =>import("../views/ListDemo.vue")

const Register = () =>import("../views/Register.vue")
const AccoutList = () =>import("../views/AccoutList.vue")

const routes = [
    {path:'/', redirect:'/home'},
    {path:'/home',naem:'home', component:Home},
    {path:'/about',name:'about', component:About},
    {path:'/vuex',name:'vuex',component:VuexPage},
    {path:'/element',name:'element',component:ElementTest},
    {path:'/list-demo',name:'listDemo',component:ListDemo},
    {path:'/register',name:'register',component:Register},
    {path:'/account-list',name:'accountlist',component:AccoutList},
    //用户中心

    {
        path:'/user',
        name:'userCenter',
        component:UserCenter,
        redirect:'/user/profile',
        children:[
            {
                path:'profile',
                name:"profile",
                component:UserProfile
            },
            {
                path:'settings',
                name:"settings",
                component:UserSettings
            },
        ]
    }
]

const router =createRouter({
    history:createWebHashHistory(),
    routes,
})

router.beforeEach((to,from,next)=>{
    console.log('前置');
    console.log('to',to);
    console.log('from',from);

    next()
})

router.afterEach((to,from)=>{
    console.log('后置');
    console.log('to',to);
    console.log('from',from);

 
})

export default router